<template>
    <a-modal v-model="visible" @cancel="$emit('closeModal')" :footer="null" wrapClassName="detailedModal">
        <ul class="front-task-info" v-loading="loading">
            <div>
                <b v-if="previousPeriodsList.length>0">往期遗留（{{previousPeriodsList.length}}）</b>
                <li v-for="item in previousPeriodsList" :key="item.id">
                    <article>
                        <p>{{item.phaseCategory}}</p>
                        <section>
                            <span>{{item.duration}}天</span>
                            <span>{{item.startDate?item.startDate.slice(0,10):''}}-{{item.endDate?item.endDate.slice(0,10):''}}</span>
                        </section>
                        <section>
                            <i :class="color[item.statusLights]"></i>
                            <span>{{item.desc}}</span>
                        </section>
                    </article>
                </li>
            </div>
            <div>
                <b v-if="currentPeriodList.length>0">本期计划（{{currentPeriodList.length}}）</b>
                <li v-for="item in currentPeriodList" :key="item.id">
                    <article>
                        <p>{{item.phaseCategory}}</p>
                        <section>
                            <span>{{item.duration}}天</span>
                            <span>{{item.startDate?item.startDate.slice(0,10):''}}-{{item.endDate?item.endDate.slice(0,10):''}}</span>
                        </section>
                        <section>
                            <i :class="color[item.statusLights]"></i>
                            <span>{{item.desc}}</span>
                        </section>
                    </article>
                </li>
            </div>
        </ul>
    </a-modal>
</template>
<script>
import { planExamineCommonGetNodeDetailList } from '@/api/project/projectPlanningAssessment'
export default {
    name: 'detailedModal' + Date.now(),
    props: ['visible', 'nodeType', 'projectId', 'month'],
    data() {
        return {
            color: {
                0: 'class-slider-0',
                1: 'class-slider-1',
                2: 'class-slider-2',
                3: 'class-slider-3',
                4: 'class-slider-4'
            },
            frontDetailList: [{id:1}, {id:2}],
            previousPeriodsList: [],
            currentPeriodList: [],
            loading: false,
        }
    },
    watch: {
        'nodeType'(val) {
            this.previousPeriodsList = [];
            this.currentPeriodList = [];
            this.getdetel();
        }
    },
    methods: {
        getdetel() {
            this.loading = true;
            let params = {
                projectId: this.projectId,
                type: this.nodeType,
                examineMonth: this.month,
            }
            planExamineCommonGetNodeDetailList(params).then((res)=> {
                this.loading = false;
                if (res.code == 0) {
                    res.data.map((item)=> {
                        if(item.dataType==1) {
                            this.previousPeriodsList.push(item);
                        }else if(item.dataType==2){
                            this.currentPeriodList.push(item);
                        }
                    })
                }
            }).catch(()=> {
                this.loading = false;
            })
        }
    }
}
</script>
<style lang="less" scoped>
    ::v-deep .detailedModal .ant-modal-body{
        padding: 0;
    }
    .front-task-info {
        width: 520px;
        min-height: 200px;
        max-height:500px;
        border-radius: 4px;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 20px;
        background-color: #fff;
        padding: 20px;
        margin: 0;
        overflow-y: auto;
        overflow-x: auto;
        &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            width: 8px;
            border-radius: 8px;
            background: #ccc;
        }
        b {
            font-weight: normal;
        }
        li {
            text-align: left;
            margin-bottom: 10px;
            cursor: pointer;
            
            article {
                border: 1px solid #e8e8e8;
                border-radius: 4px;
                padding: 1em;
                margin-top: 1em;
                white-space: normal;
                p {
                    margin: 0;
                }
                section {
                    margin-top: 5px;
                    display: flex;
                    align-items: center;
                    span {
                        margin-left: 10px;
                    }
                    span:nth-of-type(1) {
                        margin-left: 0;
                    }
                    i {
                        display: inline-block;
                        width: 24px;
                        height: 14px;
                        margin-right: 10px;
                    }
                }
            }
        }
        li:nth-last-of-type(1) {
            margin-bottom: 0;
        }
    }
</style>
